<template>
	<div class="chart-pane-bar">
		<!-- tops -->
		<div id="EchartsBarsimple"></div>
	</div>
</template>
<script>
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
export default{
	name:'EchartsBarsimple',
	data(){
		return {
			msg:''
		}
	},
	computed: {
    },
    mounted(){
    	var that = this;
    	that.getbarsimple();
	},
	props:['seriesData','xAxisData'],
	methods:{
		getbarsimple(){
			let that=this;

			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('EchartsBarsimple'));
			// 绘制图表
			myChart.setOption({
			    color: ['#3398DB'],//柱状条默认颜色
				tooltip : {
					trigger: 'axis',
					axisPointer : {
						type : 'line'
					}
				},
				grid: { 
					x: 50,
					y: 25,
					x2: 30,
                    y2: 85
				},
				xAxis : [
					{
						type : 'category',
						data : that.xAxisData,
						//  改变x轴颜色
						axisLine:{
							lineStyle:{
								color:'#000'
							}
						},
						//设置字体倾斜
						axisLabel:{
							interval:0,
							rotate:45,//倾斜度 -90 至 90 默认为0
							margin:5,
							textStyle:{
								color:"#000000"
							}
						}
					}
				],
				yAxis : [
					{
						type : 'value',
						// 控制网格线是否显示
						splitLine: {
							show: false
						},
						//  改变y轴颜色
						axisLine:{
							lineStyle:{
								color:'#000',
							}
						}
					}
				],
				series : [
					{
						name:'发稿量',
						type:'bar',
						barWidth: '60%',
						data:that.seriesData,
						itemStyle: {
			            	normal:{
			            		color:'#0c81fe'//柱状条颜色
			            	}
			            }
					}
				]

			});
		}
	},
	watch:{
		seriesData(curVal,oldVal){
			this.getbarsimple();
		},
		xAxisData(curVal,oldVal){
			this.getbarsimple();
		}
	}
}
</script>
<style scoped>
#EchartsBarsimple{
	width:100%;
	height: 360px;
	/*margin:0 0 20px 0;*/
}
</style>